<template>
  <el-container>
    <el-header>
    </el-header>
    <el-main style="display: flex; justify-content: center; align-items: center;">
      <el-form ref="form" :inline="true" class="demo-form-inline" style="display: flex; "
               v-if="!flag">
        <el-form-item>
          <span slot="label" style="font-size:25px;">企业统一社会信用代码:</span>
          <el-input v-model="orgcode" placeholder="企业统一社会信用代码" style="font-size: 22px; width: 500px;"
                    onkeyup="this.value=this.value.replace(/[^\w_]/g,'');"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmit" style="font-size: 23px; height: 40px; padding: 0 20px; ">查询
          </el-button>
        </el-form-item>
      </el-form>
    </el-main>

    <div v-if="flag">

      <el-main style="margin-left: -70px;">

        <img v-if="imgData" :src="'data:image/png;base64,'+imgData" alt="企业二维码"
             style="display: block; margin:0 auto; width: 250px; height: 250px;">
        <div
          style="display: flex; justify-content: center; align-items: center; height: 100px; flex-direction: column; ">
          <div style="font-size: 22px; margin-top: 35px;">{{ this.entName }}</div>
          <div style="font-size: 22px; margin-top: 10px;">{{ this.orgcode }}</div>
        </div>

      </el-main>

      <vue-easy-print ref="printRef">


        <div style="display:flex; justify-content:space-between; border: solid white 1px">
          <div style="display:flex; align-items:center; width: 50%;">
            <div style="transform:scale(1);">
              <img v-if="imgData" :src="'data:image/png;base64,'+imgData" alt="企业二维码"
                   style="width:102px;height:102px;margin-top: 9px; margin-left: 8px">
            </div>
          </div>

          <div style="display:flex; width: 50%; justify-content:center; align-items:center; transform:scale(0.8);">
            <div style="display:flex; flex-direction:column; justify-content:center; align-items:flex-start; ">
              <div style="font-size:12px; text-align:left; ">{{ this.entName }}</div>
              <div style="font-size:12px; text-align:left; ">{{ this.orgcode }}</div>
            </div>
          </div>
        </div>

<!--        打印两份-->
        <div style="display:flex; justify-content:space-between; border: solid white 1px; ">
          <div style="display:flex; align-items:center; width: 50%">
            <div style="transform:scale(1);">
              <img v-if="imgData" :src="'data:image/png;base64,'+imgData" alt="企业二维码"
                   style="width:102px;height:102px;margin-top: 9px; margin-left: 8px">
            </div>
          </div>

          <div style="display:flex; width: 50%; justify-content:center; align-items:center; transform:scale(0.8);">
            <div style="display:flex; flex-direction:column; justify-content:center; align-items:flex-start; ">
              <div style="font-size:12px; text-align:left; ">{{ this.entName }}</div>
              <div style="font-size:12px; text-align:left; ">{{ this.orgcode }}</div>
            </div>
          </div>
        </div>
      </vue-easy-print>

      <!--   IE打印的设置   -->
      <div v-show="false">
        <div id="print-content">

          <div style="display:flex; justify-content:space-between;">
            <div style="display:flex; align-items:center; width: 50%">
              <div style="transform:scale(1);">
                <img v-if="imgData" :src="'data:image/png;base64,'+imgData" alt="企业二维码"
                     style="width:105px;height:105px;margin-top: 12px; margin-left: 8px">
              </div>
            </div>

            <div style="display:flex; width: 50%; justify-content:center; align-items:center; transform:scale(0.9);">
              <div style="display:flex; flex-direction:column; justify-content:center; align-items:flex-start; ">
                <div style="font-size:12px; text-align:left; " v-html="breakString(this.entName, 10)"></div>
                <div style="font-size:12px; text-align:left; ">{{ this.orgcode }}</div>
              </div>
            </div>

          </div>

<!--          打印两份-->
          <div style="display:flex; justify-content:space-between; ">
            <div style="display:flex; align-items:center; width: 50%">
              <div style="transform:scale(1);">
                <img v-if="imgData" :src="'data:image/png;base64,'+imgData" alt="企业二维码"
                     style="width:105px;height:105px;margin-top: 12px; margin-left: 8px">
              </div>
            </div>
            <div style="display:flex;  width: 50%; justify-content:center; align-items:center; transform:scale(0.9);">
              <div style="display:flex; margin-top: 50%; transform: translateY(-75%); flex-direction:column; justify-content:center; align-items:flex-start; ">
                <div style="font-size:12px; text-align:left; " v-html="breakString(this.entName, 10)"></div>
                <div style="font-size:12px; text-align:left; ">{{ this.orgcode }}</div>
              </div>
            </div>

          </div>

        </div>
      </div>

      <el-header style="display: flex; justify-content: center; margin-left: -70px;">
        <el-button type="primary" @click="insertLogAndPrint()" style="width: 80px; height: 52px; font-size: 18px">打印
        </el-button>
        <el-button type="primary" @click="back()" style="width: 80px; height: 52px; font-size: 18px;">返回</el-button>
      </el-header>
    </div>
  </el-container>
</template>
<script>
import corporateApi from "@/api/corporate/query";
import businessInsertApi from "@/api/business/insert"
import vueEasyPrint from "vue-easy-print";
import {myLogout} from "@/api/login";
import Layout from "../layout/Layout";


export default {
  components: {
    vueEasyPrint
  },

  data() {
    return {
      orgcode: '',
      imgData: '',
      flag: false,
      entName: '',
      isReady: false,
    }
  },
  created() {
    corporateApi.sessionExpiration()
      .then()
      .catch(error => {
        console.log(error)
        myLogout();
        this.$store.dispatch('LogOut').then(() => {
          location.reload() // 为了重新实例化vue-router对象 避免bug
        })
      });

  },

  watch: {
    orgcode(val) {
      this.isReady = val.length === 18 && /^[A-Za-z0-9]+$/.test(val)
    }
  },

  methods: {
    breakString(str, n) {
      return str.replace(new RegExp(`(.{${n}})`, 'g'), '$1<br>');
    },
    onSubmit() {
      if (this.isReady) {
        corporateApi.sessionExpiration()
          .then()
          .catch(error => {
            console.log(error)
            myLogout();
            this.$store.dispatch('LogOut').then(() => {
              location.reload() // 为了重新实例化vue-router对象 避免bug
            })
          });
        // 提交操作
        corporateApi.getCorporateCode(this.orgcode)
          .then(res => {
            if (res.data.imgData === '没有企业信息') {
              this.$message({
                type: 'warning',
                message: '没有企业信息'
              })
            }else if(res.data.imgData === '权限不足'){
              const message = res.data.entName
              this.$message({
                type: 'warning',
                message: message
              })
            } else {
              // this.imgData = res.data;
              this.imgData = res.data.imgData;
              this.entName = res.data.entName;
              this.flag = true;
              this.$message({
                type: 'success',
                message: '查询成功'
              })
            }
          }).catch(error => {
          this.$message({
            type: 'warning',
            message: '没有权限查询该企业的企业码'
          })
        })
      } else {
        this.$message({
          type: 'warning',
          message: '请正确填写18位企业统一社会信用代码'
        })
      }
    },
    back() {
      this.flag = false;
      this.orgcode = '';
    },
    insertLogAndPrint(orgcode) {

      corporateApi.sessionExpiration()
        .then()
        .catch(error => {
          console.log(error)
          myLogout();
          this.$store.dispatch('LogOut').then(() => {
            location.reload() // 为了重新实例化vue-router对象 避免bug
          })
        });

      // 打印操作
      setTimeout(() => {
        this.printCode();
      }, 500)

      // 插入打印记录：即使插入失败不能影响正常的打印企业码业务
      businessInsertApi.saveBizRecord(this.orgcode, this.entName);
    },
    // 打印函数
    printCode() {
      // Step 1: 检测当前浏览器是否为IE或Edge浏览器
      if (/MSIE|Trident/.test(navigator.userAgent) || /Edge/.test(navigator.userAgent)) {
        // 获取需要打印的内容
        const printContent = document.getElementById('print-content').innerHTML;

        // 打开一个新窗口
        const printWindow = window.open('', 'printWindow', 'width=800,height=600');

        // 在新窗口中写入需要打印的内容
        printWindow.document.write('<html><head><title>打印预览</title>');
        // printWindow.document.write('<style>@media print { @page { margin: 0; size: auto; border: none; } body { margin: 0; padding: 0; zoom: 0.8; } }</style>');
        printWindow.document.write('<style>@media print { @page { margin: 0; size: auto; border: none;  transform-origin: top left; } body { margin: 0; padding: 0; } }</style>');
        printWindow.document.write('</head><body>');
        printWindow.document.write(printContent);
        printWindow.document.write('</body></html>');

        // 关闭写入流，并在新窗口中打印
        printWindow.document.close();
        printWindow.focus();
        printWindow.print();

        setTimeout(()=>{
          printWindow.close();
        },600)

      } else {
        this.$refs.printRef.print()
      }
    },

  },
}
</script>

<style scoped media="print">
@media print {
  @page {
    padding: 0px;
    margin: 0;
    /*size: auto;*/
    /* 不打印页眉页脚 */
    @top-left, @top-center, @top-right {
    content: none;
  }
    @bottom-left, @bottom-center, @bottom-right {
    content: none;
  }
    /* 等比缩放为100% */
    zoom: 1;
  }
}

</style>


